<template>
  <div class="bigDiv">
    <div class="headerDiv">
      <h5>员工列表</h5>
    </div>
    <div class="contentDiv">
      <el-select v-model="valueType" placeholder="请选择" @change="changeOption($event)" size="mini">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
      <span style="margin-left: 10px">
        <el-button size="small" type="danger" @click="deleTableItem()">删除</el-button>
      </span>
      <div class="rightDiv">
        <span id="title">关键字查询:</span>
        <el-input v-model="input" @input="handleValueChange" size="mini" placeholder="请输入内容"></el-input>
      </div>
    </div>
    <!--    <el-skeleton :loading="loading" animated>-->
    <!--      <template slot="template">-->
    <!--        <el-skeleton-item variant="table" style="width: 1300px; height: 1000px;"/>-->
    <!--        <div>-->
    <!--          <el-skeleton-item variant="text" style="margin-top:20px; width: 1300px;height: 40px" />-->
    <!--          <el-skeleton-item variant="text" style="margin-top:20px; width: 1300px;height: 40px" />-->
    <!--        </div>-->
    <!--      </template>-->
    <div class="tableDiv">
      <el-table v-skeleton="loading"
                ref="multipleTable"
                :data="tableData"
                stripe
                border
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
            prop="eid"
            label="编号"
            sortable
            width="75">
          <!--          <template slot-scope="{row}">{{ row.date }}</template>-->
        </el-table-column>
        <el-table-column
            label="姓名"
            sortable
            width="75">
          <template slot-scope="{row}">
            <router-link :to="{name:'StaffInfoList',query:{staffname:row.ename,eid:row.eid}}">{{ row.ename }}
            </router-link>
          </template>
        </el-table-column>
        <el-table-column
            prop="esex"
            label="性别"
            sortable
            width="75"
        >
          <!--            show-overflow-tooltip>-->
        </el-table-column>
        <el-table-column
            prop="eage"
            label="年龄"
            sortable
            width="75">
        </el-table-column>
        <el-table-column
            prop="eeducation"
            label="学历"
            sortable
            width="75">
        </el-table-column>
        <el-table-column
            prop="estaffPhone"
            label="手机号"
            sortable
            width="95">
        </el-table-column>
        <el-table-column
            prop="department.dname"
            label="部门"
            sortable
            width="75">
        </el-table-column>
        <el-table-column
            prop="eseniority"
            label="工龄"
            sortable
            width="75">
        </el-table-column>
        <el-table-column
            label="照片"
            width="100"
            sortable
        >
          <template slot-scope="{row}">
            <el-image style="width: 90px; height: 90px" :src="row.eimg" :preview-src-list="[row.eimg]">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column
            label="入职表"
            width="100"
            sortable
        >
          <template slot-scope="{row}">
            <el-image style="width: 100px; height: 100px" :src="row.edesImg" :preview-src-list="[row.edesImg]">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column
            prop="eidCard"
            label="身份证"
            sortable
            width="95">
        </el-table-column>
        <el-table-column
            label="离职表"
            width="100"
            sortable
        >
          <template slot-scope="{row}">
            <el-image style="width: 100px; height: 100px" :src="row.eleaveImg" :preview-src-list="[row.eleaveImg]">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column
            label="状态"
            sortable
            width="80">
          <template slot-scope="{row}">
            <el-tag :type="row.estatus=='在职'?'success':'info'" effect="dark">{{ row.estatus }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
            label="操作"
            width="80">
          <template slot-scope="{row}">
            <i class="el-icon-edit" style="font-size: 15px; color:blue" @click="edit(row)"></i>
            <i class="el-icon-delete" style="font-size: 15px;color:blue;margin-left: 10px" @click="deleteRow(row)"></i>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="footer">
      <div class="footer-left" style="float: left;margin-left: 10px">
        当前显示{{ start }}到{{ end }},共{{ total }}项
      </div>
      <div class="footer-right" style="float: right">
        <el-pagination
            background
            layout="prev, pager, next"
            :page-size="pageSize"
            :total="total"
            @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </div>
    <!--    </el-skeleton>-->
    <div style="margin-top: 20px;margin-left: 10px">
      <el-button size="small" type="danger" @click="deleTableItem()">删除</el-button>
    </div>
  </div>
</template>

<script>
import {mapMutations, mapState} from 'vuex'

export default {
  name: "AllStaffList",
  data() {
    return {
      valueType: '选项1',
      pageSize: 10,
      //搜索框的值
      input: '',
      //是否在搜索页的标识
      tag: true,
      //加载骨架屏
      loading: false
    }
  },
  computed: {
    ...mapState('AllStaff', ['currentPage', 'options', 'tableData', 'multipleSelection', 'total']),
    start() {
      return (Number(this.$store.state.AllStaff.page) - 1) * this.pageSize + 1;
    },
    end() {
      return Number(this.$store.state.AllStaff.page) * this.pageSize;
    }
  },
  created() {
    this.getAllStaff()
    console.log(this.$store.state.AllStaff.tableData)
  },
  methods: {
    ...mapMutations('AllStaff', ['handleSelectionChange']),
    //跳转修改界面
    edit(row) {
      this.$router.push({name: 'UpdateStaffInfo', query: {eid: row.eid}})
    },
    //获取所有员工信息
    async getAllStaff() {
      let limit = this.$store.state.AllStaff.currentPage;
      let page = this.$store.state.AllStaff.page;
      await this.$axios({
        url: `/employee/showEmployees/${page}/${limit}`,
        method: 'get'
      })
          .then((res) => {
            this.$store.state.AllStaff.total = res.data.count
            this.$store.state.AllStaff.tableData = res.data.data
            //   const _this=this
            //   setTimeout(function (){
            //     _this.loading=false
            //   },2000)
          })
    },
    //删除员工信息
    async deleteRow(row) {
      //拿到点击删除的员工的id
      let eid = row.eid
      const confirmResult = await this.$confirm('确定删除该员工信息?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(error => error);
      // console.log(confirmResult)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      } else {
        const {data: res} = await this.$axios.delete(`/employee/deleteOne/${eid}`)
        if (res.msg == '删除成功') {
          this.$message.success('删除成功')
          this.getAllStaff()
        } else {
          return this.$message.warning('删除失败')
        }
      }
    },
    //批量删除员工信息
    async deleTableItem() {
      let itemList = this.$store.state.AllStaff.multipleSelection
      let idList = itemList.map(item => item.eid)
      const confirmResult = await this.$confirm('确定删除选中员工信息?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(error => error);
      // console.log(confirmResult)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      } else {
        const {data: res} = await this.$axios.delete(`/employee/deleteMany/${idList}`)
        console.log(res)
        if (res.msg == '批量删除成功') {
          this.$message.success('删除成功')
          this.getAllStaff()
        } else {
          return this.$message.warning('删除失败')
        }
      }
    },
    //页码改变时触发的事件
    handleCurrentChange(val) {
      this.$store.state.AllStaff.page = val;
      if (this.tag == true) {
        this.getAllStaff();
      } else {
        this.getsearchStaff();
      }
    },
    //改变每页显示的个数的时候触发的事件
    changeOption(e) {
      let obj = {};
      obj = this.$store.state.AllStaff.options.find((item) => {
        return item.value == e;
      })
      this.$store.state.AllStaff.currentPage = obj.label;
      this.pageSize = Number(this.$store.state.AllStaff.currentPage);
      if (this.tag == true) {
        this.getAllStaff();
      } else {
        this.getsearchStaff();
      }
    },
    //格式化目前日期
    get_now_date(){
      var timestamp = Date.parse(new Date());
      var date = new Date(timestamp);
      //获取年份
      var Y = date.getFullYear();
      //获取月份
      var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
      //获取当日日期
      var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
      return Y + '-' + M + '-' + D;
    },
    //年月日相减
    getOffsetDays(startDate, endDate)
    {
      var startDateArr = startDate.split("-");
      var endDateArr = endDate.split("-");
      if(endDateArr[0]>startDateArr[0]){
        return endDateArr[0]-startDateArr[0]
      }else{
        return endDateArr[1]>startDateArr[1]
      }
    },
//获得模糊查询员工信息
async getsearchStaff()
{
  let limit = this.$store.state.AllStaff.currentPage;
  let page = this.$store.state.AllStaff.page;
  let message = this.input;
  await this.$axios({
    url: `/employee/showEmployeesByAll/${page}/${limit}/${message}`,
    method: 'get'
  })
      .then((res) => {
        this.$store.state.AllStaff.total = res.data.count
        this.$store.state.AllStaff.tableData = res.data.data
      })
}
,
//搜索框发生改变的时候触发的事件
handleValueChange(val)
{
  if (val == '') {
    this.tag = true
    this.getAllStaff()
  } else {
    this.tag = false;
    this.getsearchStaff();
  }
}
,
},
}
</script>

<style scoped>
.tableDiv {
  width: 100%;
  padding: 10px;
}

.headerDiv {
  width: 100%;
  height: 50px;
  padding: 10px;
  display: flex;
  align-items: center;
  font-size: 18px;
  outline: 1px solid #cfd1d2;
}

#title {
  font-size: 12px;
  margin-right: 7px;
}

.contentDiv {
  padding: 10px;
}

.rightDiv {
  float: right;
}

.bigDiv {
  width: 100%;
  background-color: white;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
}

.el-input--mini {
  width: 190.8px;
  height: 30px;
}

.el-select {
  width: 73px;
  height: 30px;
}

.footer {
  width: 100%;
  height: 34px;
  line-height: 34px;
}
</style>